<template>
  <lc-crud
    ref="curd"
    :default-sort="{
      prop: 'createTime',
      order: 'ascending'
    }"
    :column="column"
    :record="record"
    :search="search"
    :option="option"
    data="/lc-system/role"
  />
</template>
<script setup lang="ts" name="sys-role">
import { TCrudComponent, TRecord } from "@/components/crud/interface";
import { ITableColumn, STExposeComponent } from "@/components/st/interface";
import LcCrud from "@/components/crud/crud.vue";
import { ref } from "vue";
import { NzSafeAny } from "@/components/sf/type";
import { RadioUI } from "@/components/sf/interface";
import { Http } from "@/core/api/http.service";
import { Helper } from "@/core/helper/helper.service";
import AclTree from "./acl-tree/index.vue";
defineOptions({
  name: "role"
});
const curd = ref<TCrudComponent>(null);
const search = {
  properties: {
    name: {
      title: "角色名",
      ui: {
        placeholder: "请输入角色名",
        width: 150
      }
    }
  }
};
const option = {
  title: "角色"
};
const record = {
  schema: {
    properties: {
      name: {
        type: "string",
        title: "名称",
        ui: {
          placeholder: "请输入账号",
          grid: {
            span: 12
          }
        }
      },
      code: {
        type: "string",
        title: "代码",
        readonly: (data: any) => {
          return !!data?.id;
        },
        ui: {
          placeholder: "请输入角色代码",
          grid: {
            span: 12
          },
          asyncValidate: async (val: string) => {
            return Http.of().debVaildGet(`/lc-system/role/exits/${val}`);
          },
          errorMsg: "当前key已存在"
        }
      },
      forbidden: {
        type: "boolean",
        title: "禁用",
        ui: {
          widget: "radio",
          border: true,
          items: [
            { label: "否", value: false },
            { label: "是", value: true }
          ]
        } as RadioUI,
        default: false
      },
      remark: {
        type: "string",
        title: "备注",
        ui: {
          widget: "textarea",
          maxLength: 300,
          placeholder: "备注"
        }
      }
    },
    required: ["name", "code", "forbidden"]
  }
} as TRecord;
const column = [
  {
    type: "selection",
    prop: "id"
  },
  {
    type: "index"
  },
  {
    prop: "name",
    label: "角色名称"
  },
  {
    prop: "code",
    label: "角色代码"
  },
  {
    label: "是否禁用",
    prop: "forbidden",
    type: "tags",
    tags: {
      true: { text: "禁用", type: "danger" },
      false: { text: "启用", type: "" }
    }
  },
  {
    prop: "remark",
    label: "备注",
    showOverflowTooltip: true
  },
  {
    prop: "createTime",
    type: "date",
    sortable: true,
    dateFormat: "YYYY/MM/DD HH",
    label: "创建时间"
  },
  {
    label: "操作",
    buttons: [
      {
        text: "编辑",
        icon: "ant-design:edit-filled",
        divider: "dashed",
        click: (data: NzSafeAny, st: STExposeComponent) =>
          curd.value?.update(data).subscribe(() => st.reset())
      },
      {
        text: "绑定权限",
        icon: "mingcute:safety-certificate-fill",
        divider: "dashed",
        click: (data: NzSafeAny) => addAclTree(data?.id)
      },
      {
        text: "删除",
        type: "del",
        icon: "ant-design:delete-filled",
        click: (data: NzSafeAny, st: STExposeComponent) =>
          curd.value?.delOne(data?.id).subscribe(() => st.reset())
      }
    ]
  }
] as ITableColumn[];
const addAclTree = (id: string) => {
  Helper.showDrawer({
    title: "添加角色权限点",
    i: { role: id },
    footer: false,
    size: "md",
    component: AclTree,
    popOption: {
      closeOnPressEscape: true,
      closeOnClickModal: true
    }
  }).subscribe(() => {
    console.log(666666);
  });
};
</script>
@/components/st/interfaces @/components/crud/interfaces
@/components/sf/interfaces @/components/sf/types
